<script setup lang="ts">
import { COLUMNS } from '../constants'
defineProps ({
  data:{
    type:Object,
    default:()=>{
      return {}
    }
  },
    pagination:{
      type:Object,
      default:()=>{
        return {}
    }
  },
  total:Number,
  rowKey:Number
})

let emits =defineEmits(['onChange','handleOpenAdd','handleEdit','handleStart','handleDel']);

const onChange =(pageInfo)=>{
    emits("onChange",pageInfo)
}

const handleBulid = () =>{
  emits('handleOpenAdd')
}

const handleEdit = (row) =>{
  emits('handleEdit', row)
}
//判断当前参数是否包含小数点
const isDecimals = (val) => {
  if (String(val).indexOf('.') > -1) {
    return true;
  }
  return false;
}
//打开启用或者禁用的弹窗
const handleStart = (row) =>{
  emits('handleStart',row)
}

//打开删除弹窗
const handleDel =(row) =>{
  emits('handleDel',row)
}
</script>

<template>
      <div class="newBox">
           <button class="bt wt-120" @click="handleBulid()">
            新增护理项目
            </button>
      </div>
      <div class="baseList">
      <div class="tableBoxs">
        <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
        <t-table 
          :row-key="rowKey" 
          :data="data" 
          :columns="COLUMNS" 
          vertical-align="middle"
          tabel-content-width="100%"
          table-layout="fixed"
          >
          <!-- 序号 -->
          <template #rowIndex="{ rowIndex }">{{ rowIndex + 1 }}</template>
         <!-- 图片预览 -->
          <template #image="{ row }">
            <div>
              <div class="tdesign-demo-image-viewer__base">
                <t-image-viewer :images="[row.image]">
                  <template #trigger="{ open }">
                    <div class="tdesign-demo-image-viewer__ui-image">
                      <img alt="test" :src="row.image" class="tdesign-demo-image-viewer__ui-image--img" />
                      <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
                        <span>
                          <BrowseIcon size="1.4em" /> 预览
                        </span>
                      </div>
                    </div>
                  </template>
                </t-image-viewer>
              </div>
            </div>
          </template>
          <!-- 价格拼接 -->
          <template #price="{ row }">
            {{ isDecimals(row.price) ? row.price : row.price + '.00' }}
          </template>

          <!-- 按钮处理 -->
          <template #op="{ row }">
            <div class="operateCon">
              <a class="btn-dl"   @click="handleDel(row)">删除</a>
              <a class="font-bt"  @click="handleEdit(row)">编辑</a>
              <a class="delete"   @click="handleStart(row)">禁用</a>
            </div>
          </template>
        </t-table>
         <!-- 分页 -->
        <t-pagination
          v-if="total > 10"
          v-model="pagination.pageNum"
          v-model:pageSize="pagination.pageSize"
          :total="total"
          @change="onChange"
        />
      </div>
    </div>
</template>
